<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-12-21 11:05:35
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-12-21 12:01:46
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24">
            <div class="table-container">
                <el-table :data="articles" style="width: 100%" :border="true" :max-height="viewHeight - 150"
                    :row-class-name="tableRowClassName">
                    <el-table-column prop="name" width="300" label="Name" />
                    <el-table-column prop="author" width="100" label="author" />
                    <el-table-column prop="institution" width="300" label="institution" />
                    <el-table-column prop="hydrological_elements" width="300" label="hydrological_elements">
                        <template #default="scope">
                            <span v-for="(item, index) in scope.row.hydrological_elements" :key="index" >
                                <el-tag style="margin-top: 10px;">{{ item }} </el-tag> &nbsp;
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="watershed" width="300" label="watershed" />
                    <el-table-column prop="station" width="300" label="station" />
                    <el-table-column prop="time" width="300" label="time" />
                    <el-table-column prop="indicator" width="300" label="indicator" />
                    <el-table-column prop="parent_model" label="parent_model" />
                    <el-table-column fixed="right" label="Operations" width="120">
                        <template #default>
                            <el-button link type="primary" size="small" @click="">Detail</el-button>
                            <el-button link type="primary" size="small">Edit</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";

let viewHeight = ref(window.innerHeight);
let viewwidth = ref(window.innerWidth);
let articles = [
    {
        name: "黄河上游西柳沟流域淤地坝系对径流影响的模拟分析",
        author: "刘蕾",
        institution: "国家气象中心",
        model: "SWAT模型",
        hydrological_elements:
            ['年平均输沙量', '模拟流量峰值', '平均径流量', '减水量', '日降水量', '模拟流量'],
        watershed:
            "['柳沟流域', '西柳沟流域', '黄河流域', '延河流域', '皇甫川流域', '无定河流域', '永定河流域', '流溪河流域']",
        station: "",
        time: "['1956～1960年', '1963～1966年', '1984～1987年', '80～90年', '1961～2015年', '1960～2015年', '7～8月', '7～8月份', '20～30年', '2009～2015年', '2006～2008年', '6～9月', '1980～2015年', '2006～2015年', '1980～1990年']",
        indicator:
            "{'确定性系数': ['0.70以上'], '相对误差': ['0.67', '均小于20%', '16%', '0.86'], '纳什效率系数': ['0.50以上', '0.5以上']}",
        parent_model: "SWAT模型",
    },
    {
        name: "基于分布式水文模型的小流域山洪预报方法与应用",
        author: "包红军",
        institution: "国家气象中心",
        model: "WetSpa分布式水文模型",
        hydrological_elements:
            ['净雨量', '净雨强', '径流量', '降雨量', '河道流量', '年均降水量'],
        watershed: "['大沟流域', '庄河流域', '沂河流域']",
        station: "",
        time: "",
        indicator:
            "{'径流深误差': ['均16.6%'], '洪峰误差': ['均16.6%'], '确定性系数': ['0.89度'], '预报精0': ['0.89度'], '预报精度': ['0.89度']}",
        parent_model: "新安江水文模型",
    },
    {
        name: "基于SWAT模型的衡阳盆地径流量模拟研究",
        author: "龙素梅",
        institution: "湖南省农林工业勘察设计研究总院",
        model: "SWAT模型",
        hydrological_elements:
            ['区域径流量', '月径流', '汇流量', '均径流量', '流域径流量', '地表径流量'],
        watershed:
            "['母猪河流域', '大通河流域', '渭河流域', '乌鲁木齐河流域', '流溪河流域', '减河流域', '独流减河流域']",
        station: "['享堂水文站', '米山水库水文站']",
        time: "['2010—2013年', '2003—2009年', '2003—2013年', '2014—2023年']",
        indicator: "{'确定性系数': ['3.2']}",
        parent_model: "",
    },
    {
        name: "SWAT模型自动校准模块在云州水库流域参数率定研究",
        author: "秦富仓",
        institution: "内蒙古农业大学生态环境学院",
        model: "SWAT模型",
        hydrological_elements:
            ['潜在蒸散发量', '平均降水量', '径流深', '蒸散发量', '潜在蒸散发', '平均流量'],
        watershed: "['黄河流域', '卫河流域', '晋江东溪流域', '东溪流域']",
        station: "",
        time: "['7-8月', '1998-2007年']",
        indicator: "{'确定性系数': ['0.7以上', '0.78', '3.2']}",
        parent_model: "",
    },
    {
        name: "基于SWAT模型与Copula修正的融雪径流模拟",
        author: "邢贞相",
        institution: "东北农业大学水利与土木工程学院",
        model: "SWAT模型",
        hydrological_elements:
            ['径流总量', '蒸发量', '年径流总量', '降雨量', '径流峰值', '径流量'],
        watershed: "['挠力河流域', '锡林河流域']",
        station: "",
        time: "['2004～2014年', '3～5月']",
        indicator:
            "{'平均绝对误差': ['均22.24%'], '确定性系数': ['均22.24%'], '纳什效率系数': ['均0.75', '0.8以上', '均22.24%', '0.7以上', '均0.92']}",
        parent_model: "",
    },
    {
        name: "基于SWAT模型的松华坝水源区径流模拟研究",
        author: "王杰",
        institution: "云南省水利水电科学研究院",
        model: "SWAT模型",
        hydrological_elements:
            ['平均降水量', '蒸散量', '年平均降水量', '潜在蒸散量', '径流量', '降水量'],
        watershed: "['冷水河流域', '乌裕尔河流域', '梨园河流域']",
        station: "['白邑水文站', '中和水文站', '邑水文站', '白邑站', '中和站']",
        time: "",
        indicator:
            "{'径流相对误差': ['0.70', '0.75', '10%', '15%'], '纳什效率系数': ['0.70', '0.75', '10%', '15%']}",
        parent_model: "",
    },
    {
        name: "多套降水产品精度评估与可替代性研究",
        author: "邹磊",
        institution: "武汉大学水资源与水电工程科学国家重点实验室",
        model: "分布式时变增益模型",
        hydrological_elements:
            ['实际蒸散发量', '潜在蒸散发量', '逐日面雨量', '雨降量', '蒸散发量', '实际蒸散'],
        watershed: "['元江流域', '赣江流域']",
        station: "",
        time: "['1998—2010年', '1999—2003年', '2004—2006年', '1999—2006年日', '1999—2006年']",
        indicator:
            "{'均方根误差': ['均2.3'], '平均绝对误差': ['均2.3'], '平均误差': ['均2.3'], '水量平衡系数': ['均2.3'], '相关系数': ['0.5以上', '均2.3', '0.9以上'], '相对误差': ['均2.3']}",
        parent_model: "",
    },
    {
        name: "基于物理基础与基于栅格的分布式水文模型研究",
        author: "李致家",
        institution: "河海大学水文水资源学院",
        model: "CASC2D模型",
        hydrological_elements:
            ['实际模拟流量值', '流实际流量值', '平均降雨量', '降雨量', '实际流量', '流量值'],
        watershed: "海河流域",
        station: "舒家站",
        time: "['1986年～1999年', '4～6月', '1987年～1999年']",
        indicator:
            "{'合格率': ['4.4', '95%', '75%'], '峰现时差': ['超过0.85'], '径流深误差': ['超过20%']}",
        parent_model: "",
    },
    {
        name: "基于水文水动力耦合模型的洪水淹没模拟",
        author: "李选彧",
        institution: "辽宁省辽阳水文局",
        model: "水文水动力耦合模型",
        hydrological_elements:
            ['模型流量', '断面流量', '降雨量', '降雨强度', '暴雨洪水'],
        watershed: "['太子河流域', '梅溪流域', '晋江流域', '黑河流域']",
        station: "洪濑站",
        time: "",
        indicator:
            "{'平均绝对误差': ['均0.314m', '均0.179m', '均0.453m', '均0.218m'], '平均误差': ['均0.179m'], '水量平衡相对误差': ['49.02m3', '0.000573％'], '水量平衡绝对误差': ['49.02m3', '0.000573％']}",
        parent_model: "",
    },
    {
        name: "SWAT模型在浙江小流域径流计算中的应用",
        author: "蓝雪春",
        institution: "浙江省水利水电勘测设计院",
        model: "SWAT模型",
        hydrological_elements:
            ['降水量', '产流量', '日降水量', '平均流量', '均径流量', '年平均流量'],
        watershed: "['赣江流域', '兰江流域', '衢江流域']",
        station: "",
        time: "['1999—2000年', '1999—2018年', '1999—2008年', '2009—2018年']",
        indicator:
            "{'确定性系数': ['均0.6', '均20%'], '相关系数': ['0.89', '0.88', '0.93', '0.91'], '相对误差': ['均0.6', '均20%'], '纳什效率系数': ['0.89', '0.88', '0.93', '0.91']}",
        parent_model: "",
    },
    {
        name: "耦合降水预报和多目标参数优化的洪水预报方法",
        author: "林锐",
        institution: "浙江大学建筑工程学院水文与水资源研究所",
        model: "DHSVM模型",
        hydrological_elements:
            ['平均降水量', '蒸发量', '陆面蒸发量', '水面蒸发量', '年平均降水量', '年降水量'],
        watershed: "['钱塘江流域', '金华江流域', '淮河流域']",
        station: "",
        time: "['4—6月', '4—6月份', '2000年之后', '1991—2000年', '1991—1997年', '1998—2000年', '2009—2013年']",
        indicator:
            "{'均方根误差': ['均19%', '均22.2%'], '皮尔逊相关系数': ['0.5', '0.8'], '相对平均误差': ['均485-491.', '均20%'], '确定性系数': ['均485-491.', '0.4'], '纳什效率系数': ['0.67', '0.84', '0.90', '0.6'], '预报精度': ['80%以上']}",
        parent_model: "",
    },
    {
        name: "SWAT模型在伊犁河上游缺资料区的应用",
        author: "陆志翔",
        institution: "中国科学院寒区旱区环境与工程研究所",
        model: "SWAT模型",
        hydrological_elements:
            ['平均流量', '实际蒸散', '潜在蒸散发量', '日降水量', '总径流量', '地表径流量'],
        watershed: "['晋江流域', '伊犁河流域', '洛河流域', '长江流域', '汉江流域']",
        station: "",
        time: "['3～4月', '3～4月份']",
        indicator:
            { '确定性系数': ['8%以上', '0.6以上', '20%以上', '0.5以上', '0.83以上'], '纳什效率系数': ['8%以上', '0.6以上', '20%以上', '0.5以上', '0.83以上'], '相关系数': ['0.6以上', '8%以上', '0.83以上'], '相对误差': ['8%以上', '0.6以上', '20%以上', '0.5以上', '0.83以上'] },
        parent_model: "",
    },
    {
        name: "甘肃梨园河流域SWAT径流模拟与预报",
        author: "薛天柱",
        institution: "兰州大学西部环境教育部重点实验室",
        model: "SWAT模型",
        hydrological_elements:
            ['径径流模拟', '融水量', '平均降水量', '年径流量', '年平均降水量', '月均径流'],
        watershed:
            "['梨园河流域', '黑河流域', '葫芦河流域', '三川河流域', '芦河流域', '卫河流域']",
        station: "肃南站",
        time: "2009-2018年",
        indicator:
            "{'纳什效率系数': ['均0.80', '0.87', '均10%', '0.86', '0.84'], '相关系数': ['均10%', '均0.80'], '相对误差': ['均10%', '均0.80']}",
        parent_model: "",
    },
    {
        name: "鄱阳湖流域水文效应对气候变化的响应",
        author: "李云良",
        institution: "中国科学院南京地理与湖泊研究所湖泊与环境国家重点实验室",
        model: "WATLAC模型",
        hydrological_elements:
            ['实际蒸散发量', '道径流量', '平均降雨量', '降雨量', '蒸散发量', '实际蒸散'],
        watershed:
            "['长江流域', '修水流域', '赣江流域', '饶河流域', '信江流域', '抚河流域', '鄱湖流域']",
        station: "",
        time: "['2000~2008年', '2000~2005年', '2006~2008年', '2002～2005年', '4～6月', '2000～2005年', '2006～2008年', '2000～2008年']",
        indicator:
            "{'流域模拟': ['1.1'], '相对误差': ['0.90', '0.73', '0.70', '2.1'], '确定性系数': ['0.90', '0.73', '0.70', '2.1'], '纳希效率系数': ['0.90', '0.73', '0.70', '2.1']}",
        parent_model: "",
    },
    {
        name: "基于SWAT模型的开都河上游未来土地利用变化对径流的影响",
        author: "罗映雪",
        institution: "新疆大学",
        model: "SWAT模型",
        hydrological_elements:
            ['均径流', '河流流量', '年径流量', '地表径流量', '平均流量', '降水量'],
        watershed:
            "['黑河流域', '泾河流域', '开都河流域', '沣河流域', '马营河流域', '滦河流域', '石羊河流域', '藉河流域']",
        station: "大山口水文站",
        time: "['1980—2005年', '1979—2000年', '1982—2000年', '1979—1981年', '1980—1995年', '1967—2000年', '1982—1991年', '1992—2000年', '11—12月', '10—12月', '4—9月', '5—9月', '1—3月', '1980—2010年']",
        indicator:
            "{'确定性系数': ['0.57', '0.73', '0.74', '0.58'], '纳什效率系数': ['0.57', '0.73', '0.74', '0.58']}",
        parent_model: "",
    },
];
const tableRowClassName = ({
    row,
    rowIndex,
}) => {
    if (rowIndex % 2 == 0) {
        return ''
    } else {
        return 'success-row'
    }
}
</script>

<style lang="scss" scoped>
.table-container {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
}
</style>
<style lang="scss">
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
